<template>
	<view class="myuni-playlist-card" :class="themeType==='light'?'bgc-light':'bgc'">
		<view v-if="recommend" class="recommend-head-info head-info">
			<image class="cover" :src="playlist[0]&&playlist[0].al.picUrl" :lazy-load="true" mode="widthFix"></image>
			<view class="info">
				<view class="recommend-desc ft" v-for="(item,index) in desc.slice(0,3)" :key="index">{{item}}</view>
			</view>
			<view class="listen-btn" :class="themeType==='light'?'bgc-deep':'bgc-deep-light'">
			  <i class="iconfont icon-bg-play"></i><text>{{time}}</text>
			</view>
		</view>
		<view v-else-if="search" style="height: 20rpx;">
		</view>
		<view v-else class="head-info" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
			<image class="cover" :src="desc.coverImgUrl" :lazy-load="true" mode="widthFix"></image>
			<view class="info">
				<view class="title ft">
					{{desc.name}}
				</view>
				<view class="author">
					<image class="avatar" :src="desc.avatarUrl" :lazy-load="true" mode="widthFix"></image>
					<text>{{desc.nickname}}</text>
				</view>
			</view>
			<view class="listen-btn" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
			  <i class="iconfont icon-bg-play"></i><text>听听看</text>
			</view>
		</view>
		<view class="content">
			<view v-if="recommend" class="tips">
				你可能喜欢的歌曲
			</view>
			<uni-list class="list">
			    <uni-list-item v-for="(item,index) in playlist" :title="item.al.name" :note="item.ar[0].name+'-'+item.al.name" @click.native="emitItem(item.al,item.ar[0],item.id,index)">
					 <template slot="footer">
						 <view class="control">
						 	<i class="has-mv iconfont icon-bg-play"></i>
						 	<i class="detail iconfont icon-gedan"></i>
						 </view>
					 </template>
			    </uni-list-item>
			</uni-list>
			<view v-if="recommend||all" class="all-btn ft" @click="emitGetAll">
				查看完整歌单<uni-icons type="arrowright"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	props:{
		playlist:{
			type:[Array,Object],
			default:[]
		},
		desc:{
			type:[Array,Object],
			default:{}
		},
		id:{
			type:[Number,String],
			default:''
		},
		recommend:{
			type:Boolean,
			default:false
		},
		search:{
			type:Boolean,
			default:false
		},
		all:{
			type:Boolean,
			default:false
		}
	},
	computed:{
		...mapState(['themeType']),
		time(){
			return this.dayjs.format('YYYY-MM-DD')
		}
	},
	mounted() {
	},
	methods:{
		emitItem(al,ar,id,index){
			this.$emit('emitItem',{al,ar,id,index})
		},
		emitGetAll(){
			this.$emit('emitGetAll')
		}
	}
}
</script>

<style lang="scss" scoped>
.myuni-playlist-card{
	/*  #ifdef  MP-WEIXIN*/
		padding: 40rpx 20rpx;
	/*  #endif  */
	/*  #ifndef  MP-WEIXIN*/
		margin: 40rpx 20rpx;
	/*  #endif  */
	box-shadow: 2rpx 2rpx 10rpx #fff;
	border-radius:40rpx 40rpx;
	.head-info{
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx 20rpx 20px 20px;
		// background:linear-gradient(to bottom,#2f3533,#3b2d2c);
		z-index: 100;
		.cover{
			width: 200rpx;
			height: 200rpx;
		}
		.info{
			margin-left: 20rpx;
			.title{
				font-size: 28rpx;
			}
			.author{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				color: #4c4a48;
				.avatar{
					margin-right: 20rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}
		}
	    .listen-btn{
		  position: absolute;
		  padding: 10rpx 20rpx;
		  bottom: -20rpx;
		  left: 50%;
		  // background-color: #38383a;
		  border-radius: 20px;
		  transform: translateX(-50%);
		  i{
			  color: #a14136;
		  }
		  text{
			  color: #bebebe;
		  }
		}
	}
	.recommend-head-info{
		justify-content: flex-start;
		.recommend-desc{
			padding: 10rpx;
			// color: red;
			font-size: 28rpx;
		}
	}
	.content{
		box-sizing: border-box;
		position: relative;
		padding:60rpx 20rpx 0rpx;
		margin-top: -40rpx;
		opacity: .5;
		.tips{
			font-size: 22rpx;
		}
		.list{
			background-color: unset;
			overflow: hidden;
			::v-deep.uni-list-item{
				background-color: unset !important;
				.uni-list-item__content-title{
					color: $font;
				}
				.has-mv{
					margin-right: 40rpx;
					line-height: 76rpx;
					color: red;
				}
				.detail{
					line-height: 76rpx;
				}
			}
			::v-deep.uni-list--border-top,::v-deep.uni-list--border-bottom{
				height: 0;
			}
		}
		.all-btn{
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
			text-align: center;
		}
	}
}
</style>
